/* eslint-disable array-callback-return */
import React from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Divider, Spin, Tabs, Row, Col } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import queryString from 'query-string';
import downloadFile from '@/utils/utils';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import DescriptionList from '@/components/DescriptionList';
import Quotation from './Quotation';

const { Description } = DescriptionList;
const { TabPane } = Tabs;
@connect(({ busicont, loading, publicdata }) => ({
  loading: loading.models.busicont || loading.models.publicdata,
  dictCode: publicdata.dictCode,
  contInfo: busicont.contInfo, // 客户合同回显数据
}))
@Form.create()
class Details extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 字典列表：服务类型、顺延方式、付款方式、收费规则、客户付款周期、资料收取方式、发票交付类型、发票交付方式、发票方式、发票类型、拆分规则、付款日期选择方式、产品类型、附件类型
      dictList: [
        'SER_TYPE',
        'POS_WAY',
        'PAY_WAY',
        'FEE_RULE',
        'CUST_PAY_PERIOD',
        'SEND_MAT_COLT_WAY',
        'INV_DELV_TYPE',
        'INV_DELV_WAY',
        'INV_CATE',
        'INV_TYPE',
        'SPLIT_RULES',
        'SELECTION_TYPE',
        'PD_CATE',
        'AFFIX_TYPE',
        'CONT_SPOT',
      ],
      SPLIT_RULES: [],
      CONT_SPOT: [],
      contId: null,
      subActiveKey: null,
    };
  }

  componentDidMount() {
    const { location, dispatch } = this.props;
    const { dictList } = this.state;
    const { contId } = queryString.parse(location.search);
    const { activeKey } = queryString.parse(location.search);
    this.setState({ contId, subActiveKey: activeKey });
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: dictList,
    }).then(data => {
      const sortNumber = (a, b) => a.itemCode - b.itemCode;
      dictList.map(dict => {
        this.setState({ [dict]: data[dict].sort(sortNumber) });
      });
      this.getList(contId);
    });
  }

  // 获取数据
  getList = contId => {
    const { dispatch, dictCode } = this.props;
    if (contId) {
      dispatch({
        type: 'busicont/getCustomerDetail',
        payload: {
          contId,
        },
      }).then(response => {
        const contInfo = response.data || {};
        dispatch({
          type: 'busicont/matchDictName',
          payload: {
            contInfo,
            dictCode,
          },
        });
      });
    } else {
      router.push('/salemanage/busicont/index');
    }
  };

  // 切换页签
  changeTabPane = activeKey => {
    this.setState({ subActiveKey: activeKey });
  };

  render() {
    const { subActiveKey, contId, SPLIT_RULES, CONT_SPOT } = this.state;
    const { loading, contInfo } = this.props;
    return (
      <Spin tip="Loading..." spinning={loading}>
        <PageHeaderWrapper>
          <Card>
            <Tabs
              activeKey={subActiveKey}
              onChange={this.changeTabPane}
              tabBarExtraContent={
                subActiveKey === '1' ? (
                  <a onClick={() => router.push(`/salemanage/busicont/history?contId=${contId}`)}>
                    历史变更记录
                  </a>
                ) : (
                  <div />
                )
              }
            >
              <TabPane tab="商务合同信息" key="1">
                <DescriptionList
                  title={
                    <span style={{ fontSize: 16, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                      商务合同
                    </span>
                  }
                >
                  <Description term="客户名称">{contInfo.custName || '--'}</Description>
                  <Description term="合同名称">{contInfo.contName || '--'}</Description>
                  <Description term="服务类型">{contInfo.serTypeName || '--'}</Description>
                  <Description term="签约日期">
                    {moment(contInfo.signDate).format('YYYY-MM-DD') || '--'}
                  </Description>
                  <Description term="签署部门">{contInfo.signDepName || '--'}</Description>
                  <Description term="签署人">{contInfo.signName || '--'}</Description>
                  <Description term="合同日期">
                    {moment(contInfo.beginDate).format('YYYY-MM-DD') || '--'} ~{' '}
                    {moment(contInfo.endDate).format('YYYY-MM-DD') || '--'}
                  </Description>
                  <Description term="顺延方式">
                    {contInfo.posWayName} {contInfo.posDate ? `${contInfo.posDate}月` : ''}
                  </Description>
                  <Description term="所属客服">{contInfo.primName || '--'}</Description>
                  <Description term="创建人">{contInfo.creName || '--'}</Description>
                  <Description term="创建时间">{moment(contInfo.creTime).format('YYYY-MM-DD HH:mm') || '--'}</Description>
                </DescriptionList>
                {/* 合同约定 */}
                <Divider />
                <DescriptionList
                  title={
                    <span style={{ fontSize: 16, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                      合同约定
                    </span>
                  }
                >
                  <Description term="付款方式">
                    {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.payWayName) || '--'}
                  </Description>
                  <Description term="账单交付日">
                    {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.billDelvDay) || '--'}
                  </Description>
                  <Description term="客服付款周期">
                    {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.payPeriodName) ||
                      '--'}
                  </Description>
                  <Description term="发票邮寄周期">
                    {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.invPeriodName) ||
                      '--'}
                  </Description>
                  <Description term="工资发放日">
                    每月{contInfo.crmCustContConfig && contInfo.crmCustContConfig.payoutDay}日
                  </Description>
                  <Description term="预付款">
                    {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.advancePrice) ||
                      '--'}
                  </Description>
                  <Description term="资料收取">
                    {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.matColtWayName) ||
                      '--'}
                  </Description>
                  <Description term="发票交付">
                    {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.invDelvTypeName) ||
                      null}
                    &nbsp;
                    {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.invCateName) || null}
                    &nbsp;
                    {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.invTypeName) || null}
                    &nbsp;
                    {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.invDelvWayName) ||
                      '--'}
                  </Description>
                </DescriptionList>
                {/* 收费设置 */}
                <Divider />
                <DescriptionList
                  title={
                    <span style={{ fontSize: 16, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                      收费设置
                    </span>
                  }
                >
                  <Description term="社保收费规则">
                    {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.insFeeRuleName) ||
                      '--'}
                  </Description>
                  <Description term="公积金收费规则">
                    {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.accuFeeRuleName) ||
                      '--'}
                  </Description>
                  <Description term="最低收费">
                    {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.lowestPrice) || '--'}
                  </Description>
                  <Description term="是否全额">
                    {contInfo.crmCustContConfig && contInfo.crmCustContConfig.fullyFlag === 1
                      ? '是'
                      : '否'}
                  </Description>
                  {contInfo.crmCustContConfig && contInfo.crmCustContConfig.fullyFlag === 1 ? (
                    <Description term="税率">
                      {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.collTax) || '--'}%
                    </Description>
                  ) : (
                    <span />
                  )}
                  <Description term="账单拆分规则">
                    {SPLIT_RULES &&
                      SPLIT_RULES.map((item, i) => {
                        const flag = [];
                        flag[i] = '否';
                        if (contInfo.crmCustContConfig && contInfo.crmCustContConfig.splitFlag) {
                          contInfo.crmCustContConfig.splitFlag.map(j => {
                            if (j === Number(item.itemCode)) {
                              flag[i] = '是';
                            } else {
                              flag[i] = '否';
                            }
                          });
                        }
                        return (
                          <span key={item.itemCode}>
                            {item.itemName}:{flag[i]}&nbsp;&nbsp;
                          </span>
                        );
                      })}
                  </Description>
                  <Description term="垫付设置">
                    {CONT_SPOT &&
                      CONT_SPOT.map((item, i) => {
                        const flag = [];
                        flag[i] = '否';
                        if (contInfo.crmCustContConfig && contInfo.crmCustContConfig.paidFlag) {
                          contInfo.crmCustContConfig.paidFlag.map(j => {
                            if (j === Number(item.itemCode)) {
                              flag[i] = '是';
                            } else {
                              flag[i] = '否';
                            }
                          });
                        }
                        return (
                          <span key={item.itemCode}>
                            {item.itemName}:{flag[i]}&nbsp;&nbsp;
                          </span>
                        );
                      })}
                  </Description>
                </DescriptionList>
                {/* 付款日期设置 */}
                <Divider />
                {contInfo && contInfo.defaultAccoPeriod ? (
                  <DescriptionList
                    title={
                      <span style={{ fontSize: 16, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                        付款日期设置
                      </span>
                    }
                  >
                    <Description term="默认设置">
                      {contInfo.defaultAccoPeriod && contInfo.selectionTypeName}{' '}
                      {contInfo.defaultAccoPeriod && contInfo.defaultAccoPeriod.accoPeriodDays}日
                    </Description>
                  </DescriptionList>
                ) : null}
                {/* 特殊要求 */}
                <Divider />
                <DescriptionList
                  title={
                    <span style={{ fontSize: 16, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                      特殊要求
                    </span>
                  }
                >
                  <Description>
                    {(contInfo.crmCustContConfig && contInfo.crmCustContConfig.speReq) ||
                      '暂无数据'}
                  </Description>
                </DescriptionList>
                {/* 附件 */}
                <div>
                  <Divider />
                  <Row
                    style={{
                      marginBottom: 15,
                      fontSize: 16,
                      color: 'rgba(0,0,0,.85)',
                      fontWeight: 'bold',
                    }}
                  >
                    附件
                  </Row>
                  <Row style={{ lineHeight: '30px' }}>
                    {contInfo && contInfo.listContFileWord && contInfo.listContFileWord.length ? (
                      <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                        <Row style={{ fontWeight: 'bold' }}>合同电子版WORD版</Row>
                        {contInfo.listContFileWord &&
                          contInfo.listContFileWord.map(item => (
                            <Row key={item.contFileId}>
                              <a
                                onClick={e => {
                                  e.preventDefault();
                                  downloadFile({
                                    fileId: item.fileFileid,
                                    fileName: item.fileName,
                                  });
                                }}
                              >
                                {item.fileName || '--'}
                              </a>
                            </Row>
                          ))}
                      </Col>
                    ) : null}
                    {contInfo && contInfo.listContFilePdf && contInfo.listContFilePdf.length ? (
                      <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                        <Row style={{ fontWeight: 'bold' }}>合同扫描文件PDF版</Row>
                        {contInfo.listContFilePdf &&
                          contInfo.listContFilePdf.map(item => (
                            <Row key={item.contFileId}>
                              <a
                                onClick={e => {
                                  e.preventDefault();
                                  downloadFile({
                                    fileId: item.fileFileid,
                                    fileName: item.fileName,
                                  });
                                }}
                              >
                                {item.fileName || '--'}
                              </a>
                            </Row>
                          ))}
                      </Col>
                    ) : null}
                    {contInfo && contInfo.listContFileOther && contInfo.listContFileOther.length ? (
                      <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                        <Row style={{ fontWeight: 'bold' }}>其他附件</Row>
                        {contInfo.listContFileOther &&
                          contInfo.listContFileOther.map(item => (
                            <Row key={item.custContFileId}>
                              <a
                                onClick={e => {
                                  e.preventDefault();
                                  downloadFile({
                                    fileId: item.fileFileid,
                                    fileName: item.fileName,
                                  });
                                }}
                              >
                                {item.fileName || '--'}
                              </a>
                            </Row>
                          ))}
                      </Col>
                    ) : null}
                  </Row>
                </div>
              </TabPane>
              <TabPane tab="报价单信息" key="2">
                <Quotation contId={contId} value={subActiveKey} />
              </TabPane>
            </Tabs>
          </Card>
          <FooterToolbar style={{ width: '100%' }}>
            <Button onClick={() => router.goBack()}>返回</Button>
          </FooterToolbar>
        </PageHeaderWrapper>
      </Spin>
    );
  }
}
export default Details;
